<template>
  <el-dialog
    :title="modalData.id ? $t('dataSource.editData') : $t('dataSource.newData')"
    :visible="visible"
    @close="onClose"
    @open="onOpen"
  >
    <el-form
      :ref="refName"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.title')" prop="title">
            <el-input v-model="ruleForm.title" :placeholder="$t('dataSource.inputTitle')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.type')" prop="type">
            <el-select v-model="ruleForm.type" :placeholder="$t('dataSource.chooseType')">
              <el-option
                v-for="typeItem in typeList"
                :key="typeItem.key"
                :label="typeItem.label"
                :title="typeItem.label"
                :value="typeItem.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="ip" prop="ip">
            <el-input v-model="ruleForm.ip" :placeholder="$t('dataSource.inputIp')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.port')" prop="port">
            <el-input
              v-model="ruleForm.port"
              type="number"
              :placeholder="$t('dataSource.inputPort')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.dbName')" prop="dbName">
            <el-input v-model="ruleForm.dbName" :placeholder="$t('dataSource.inputdbName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.dbType')" prop="dbType">
            <el-select v-model="ruleForm.dbType" :placeholder="$t('dataSource.inputdbType')">
              <el-option
                v-for="typeItem in dbTypeList"
                :key="typeItem.key"
                :label="typeItem.label"
                :title="typeItem.label"
                :value="typeItem.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.userName')" prop="userName">
            <el-input v-model="ruleForm.userName" :placeholder="$t('dataSource.inputUserName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dataSource.password')" prop="password">
            <el-input v-model="ruleForm.password" :placeholder="$t('dataSource.inputPassword')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('dataSource.param')" prop="param">
        <el-input v-model="ruleForm.param" :placeholder="$t('dataSource.param')" />
      </el-form-item>

      <el-form-item :label="$t('dataSource.remark')" prop="remark">
        <el-input v-model="ruleForm.remark" :placeholder="$t('dataSource.inputRemark')" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="remark">
            <el-button type="primary" :loading="loading" @click="onTestConnect">
              {{ $t('dataSource.linkTest') }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span
              v-if="testStatus === testMap.success"
              class="test-connect success"
            >
              {{ $t('dataSource.linkSuccess') }}
            </span>
            <span v-if="testStatus === testMap.fail" class="test-connect fail">
              {{ $t('dataSource.linkLose') }}
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose"> {{ $t('btns.cancel') }}</el-button>
      <el-button
        :disabled="testStatus !== testMap.success"
        type="primary"
        :loading="loading"
        @click="submitForm"
      >
        {{ $t('btns.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { datasourceTest, datasourceEdit } from '@/api/sysMg'

const testMap = {
  none: 'none',
  success: 'success',
  fail: 'fail'
}

const dbTypeList = [
  { key: 'MYSQL', label: 'MYSQL' },
  // { key: "ORACLE", label: "ORACLE" },
  { key: 'SQLSERVER', label: 'SQLSERVER' }
]

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    modalData: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    // const validatePhone = (rule, value, callback) => {
    //   if (value) {
    //     const pwdRegEn = /^1[3456789]\d{9}$/
    //     if (!pwdRegEn.test(value)) {
    //       callback(new Error('请输入正确的电话号码'))
    //       return
    //     }
    //   }
    //   callback()
    // }

    return {
      refName: 'ruleForm',
      ruleForm: {},
      rules: {
        title: [{ required: true, message: this.$t('dataSource.inputTitle'), trigger: 'blur' }],
        type: [{ required: true, message: this.$t('dataSource.chooseType'), trigger: 'blur' }],

        ip: [{ required: true, message: '请输入ip', trigger: 'blur' }],
        port: [{ required: true, message: '请输入端口', trigger: 'blur' }],
        dbName: [
          { required: true, message: this.$t('dataSource.inputdbName'), trigger: 'blur' }
        ],
        dbType: [
          { required: true, message: this.$t('dataSource.inputdbType'), trigger: 'blur' }
        ],
        userName: [
          { required: true, message: this.$t('dataSource.inputUserName'), trigger: 'blur' }
        ],
        password: [{ required: true, message: this.$t('dataSource.inputPassword'), trigger: 'blur' }]

        // telPhone: [{ validator: validatePhone, trigger: 'blur' }],
      },
      dbTypeList,
      testMap,
      testStatus: testMap.none
    }
  },
  computed: {
    ...mapGetters(['loading']),
    typeList() {
      return [
        { label: this.$t('dataSource.local'), key: 0 }, { label: this.$t('dataSource.remote'), key: 1 }
      ]
    }
  },

  mounted() {},

  methods: {
    async submitForm() {
      this.$refs[this.refName].validate(valid => {
        if (!valid) {
          return
        }
        datasourceEdit(this.ruleForm).then(({ success }) => {
          if (success) {
            this.$emit('updateConditions')
            this.onClose()
          }
        })
      })
    },
    onClose() {
      this.$emit('update:visible', false)
      this.$refs[this.refName].resetFields()

      this.ruleForm = {}
      this.testStatus = this.testMap.none
    },
    onOpen() {
      // 默认 数据
      const defaultValues = {
        dbType: dbTypeList[0].key,
        type: this.typeList[0].key
        //   concurrentVersion: 0,
        //   dataVersion: 0,
        //   dbName: 'csjcgc2019',
        //   dbType: 'SQLSERVER',
        //   ip: '122.228.70.38',
        //   password: 'Yg@rfvUJM.',
        //   port: '63057',
        //   status: 0,
        //   type: 0,
        //   userName: 'sa'
      }

      this.ruleForm = Object.assign(defaultValues, this.modalData)
    },
    async onTestConnect() {
      const { success } = await datasourceTest(this.ruleForm)

      this.testStatus = success ? this.testMap.success : this.testMap.fail
    }
  }
}
</script>

<style lang="scss" scoped>
.test-connect {
  &.success {
    color: #99ff99;
  }
  &.fail {
    color: #ff9999;
  }
}
</style>
